<div data-bind="visible: !waitForApproval()">
    <div class="canvas_container">
        <input id="gcode_slider_layers" type="text">
        <canvas id="gcode_canvas" width="568" height="568"></canvas>
        <input id="gcode_slider_commands" type="text" style="width: 554px">
    </div>

    <div class="progress" >
        <div class="bar" style="width: 0%;" data-bind="text: ui_progress_text, style: { width: ui_progress_percentage() + '%' }"></div>
    </div>

    <div class="row-fluid">
        <div class="span7">
            <h1>{{ _('Model info') }}</h1>
            <p data-bind="html: ui_modelInfo"></p>

            <h1>Layer info</h1>
            <p data-bind="html: ui_layerInfo"></p>
        </div>
        <div class="span5">
            <h1>{{ _('Renderer options') }}</h1>

            <p>
                <label class="checkbox">
                    <input type="checkbox" data-bind="checked: renderer_syncProgress">{{ _('Sync with job progress') }}
                </label>
            </p>
            <p>
                <label class="checkbox">
                    <input type="checkbox" data-bind="checked: renderer_centerViewport">{{ _('Center viewport on model') }}
                </label>
                <label class="checkbox">
                    <input type="checkbox" data-bind="checked: renderer_zoomOnModel">{{ _('Zoom in on model') }}
                </label>
            </p>

            <p>
                <label class="checkbox">
                    <input type="checkbox" data-bind="checked: renderer_showMoves">{{ _('Show moves') }}
                </label>
                <label class="checkbox">
                    <input type="checkbox" data-bind="checked: renderer_showRetracts">{{ _('Show retracts') }}
                </label>
            </p>

            <p>
                <label class="checkbox">
                    <input type="checkbox" data-bind="checked: renderer_showPrevious">{{ _('Also show previous layer') }}
                </label>
                <label class="checkbox">
                    <input type="checkbox" data-bind="checked: renderer_showNext">{{ _('Also show next layer') }}
                </label>
            </p>

            <p>
                <button class="btn btn-block" data-bind="click: reload, enable: enableReload">{{ _('Reload') }}</button>
            </p>
        </div>
    </div>

    <div class="muted">
        <small>{{ _('Note that the time estimates in this tab are calculated by the GCODE viewer in your browser and might differ from the values calculated by the server that are displayed in the "State" and "Files" panels in the sidebar due to slightly different implementations.') }}</small>
    </div>
</div>
<div data-bind="visible: waitForApproval">
    <h1>{{ _('Warning') }}</h1>
    {% trans %}<p>
        You've selected <strong data-bind="text: selectedFile.name"></strong> for printing which has a size of
        <strong data-bind="text: formatSize(selectedFile.size())"></strong>. Depending on your machine this
        might be too large for rendering and cause your browser to become unresponsive or crash.
    </p>

    <p>
        Are you sure you want to visualize this file nevertheless?
    </p>{% endtrans %}

    <button class="btn btn-warning btn-block" data-bind="click: approveLargeFile">
        {{ _('Yes, please visualize %(name)s regardless of its size', name='<span data-bind="text: selectedFile.name"></span>') }}
    </button>
</div>
